<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>

<script>
  // es5中的var是没有块级作用域的
  // es6中的let是有块级作用域的
  // ES5之前因为if和for都没有块级作用域的概念，所以我们很多时候，要借助function的作用域来解决应用外面变量的问题
  // ES6中，加入了let，let它是有if和for的块级作用域的
  
  // 1.变量作用域：变量在什么范围内是可用的？
  // var 没有块级作用域，在全局也能访问到块里面的变量。很多语言里，希望在外面不能访问到块里的变量
  {
    var name='axu';
    console.log(name); // axu {}就是一个块
  }
  console.log(name); // axu var 没有块级作用域，在全局也能访问到块里面的变量

  // 2.没有块级作用域引起的问题：if的块级
  var func;
  if(true){
    var name='axu';
    func=function (){
      console.log(name);
    }
  }
  name='laoWen';
  func();  // 打印出来的是laoWen，但我们不希望在外面把我们的name改变了

  // 3.没有块级作用域引起的问题：for的块级
  // 用闭包可以解决问题：因为函数有作用域
  //在函数作用域中可以访问到全局作用域的变量，在全局作用域中无法访问到函数作用域的变量
  //每调用一次函数就会创建一个新的函数作用域，他们之间是相互独立的
  //var btns=document.getElementsByTagName('button');
 /* for(var i=0; i<btns.length; i++){
    btns[i].addEventListener('click',function (){
      console.log('第' + i + '个按钮被点击'); // 无论点哪个按钮出来的都是3，因为var没有块级作用域，只有函数作用域
      // 也会创建三个事件，但后面事件里的i会覆盖前面事件里的i
       /*
			 * for循环会在页面加载完成之后立即执行，
			 * 	而响应函数会在超链接被点击时才执行
			 * 当响应函数执行时，for循环早已执行完毕
			 
    })*/

  //使用闭包
   /* for(var i=0; i<btns.length; i++){
      (function(num){ // 循环3次，就有三个函数,每个函数有自己的作用域
        btns[i].addEventListener('click',function (){
          console.log('第' + num + '个按钮被点击');
        })
      })(i)
    }*/

  // 使用ES6
    const btns=document.getElementsByTagName("button");
    for(let i =0; i<btns.length; i++){
    btns[i].addEventListener('click',function () {
      console.log('第' + i + '个按钮被点击'); // 使用let有自己的块级作用域，会创建3个事件,每个事件里的i都不一样
    })
    }

</script>
</body>
</html>